<!DOCTYPE html>
<!-- saved from url=(0026)http://192.168.13.62:9999/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>笔记</title>
    <link rel="stylesheet" href="./笔记_files/github-markdown.css">
    <link rel="stylesheet" href="./笔记_files/atom-one-dark.css">
    <script src="./笔记_files/highlight.pack.js.下载"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <style>
        .markdown-body {
            box-sizing: border-box;
            min-width: 200px;
            max-width: 980px;
            margin: 0 auto;
            padding: 45px;
        }
    </style>
</head>

<body>
    <article class="markdown-body">
        <pre><code class="lang-javascript hljs"><span class="hljs-comment">// splice 方法的作用是截取一个新数组,会修改原数组</span>
<span class="hljs-comment">// var newarr = arr.splice(startIndex,count) 从startindex开始截取 截取count个元素</span>
<span class="hljs-comment">// 包含starindex位置的元素</span>

<span class="hljs-comment">// slice 方法的作用也是截取一个新数组 但是不会改变原数组</span>
<span class="hljs-comment">// var newarr = arr.slice(startIndex,endindex) 从startindex索引位置开始截取元素 一直截取到</span>
<span class="hljs-comment">// endindex 包含starindex位置的元素 不包含endindex位置的元素</span>
</code></pre>
<h2 id="mvc-mvvm-">MVC和 MVVM的区别</h2>
<p><strong>高内聚低耦合</strong></p>
<blockquote>
<p>MVC 和 MVVM 设计模式要解决的问题就是如何将数据(M)显示到视图(V)上,同时达到软件的解耦</p>
<p>MVC 所以数据的中转都由C控制 C可以主动的去获取M中的数据更新 同时也可以监视到视图的页面变化</p>
<p>MVVM 双向数据绑定 M和V可以进行数据通信 但是同时不会造成模块的耦合 正因为有VM的存在,
可以对M和V的数据通信进行检测处理。</p>
</blockquote>
<h1 id="vue">vue</h1>
<h2 id="-">编码步骤</h2>
<ol>
<li>引入vue.js文件</li>
<li><p>定义一个vue的管理范围</p>
<pre><code class="hljs xml"> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'app'</span>&gt;</span>

 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

 vue1.0里面vue的管理区域的id可以定义在HTML以及body标签上
 vue2.0里面不允许这样来做
</code></pre></li>
<li><p>定义一个vue的对象</p>
<pre><code class="hljs css"> <span class="hljs-selector-tag">new</span> <span class="hljs-selector-tag">Vue</span>({
     <span class="hljs-attribute">el</span>:<span class="hljs-string">'#app'</span>,
     data:{
         // 定义将来要在vue管理区域中使用的数据
         name：<span class="hljs-string">"zs"</span>
     },
     <span class="hljs-selector-tag">methods</span>：{
         <span class="hljs-attribute">fn</span>:<span class="hljs-built_in">function</span>(){
             this.name = <span class="hljs-string">'ls'</span>
         }
     }
 })
</code></pre></li>
</ol>
<h2 id="-">系统指令</h2>
<ul>
<li><p><code>{{}}</code>:插值表达式</p>
<pre><code class="hljs">  作用:将vue对象中的数据以及表达式显示到vue托管区域中

  {{这里书写vue对象中data里面的数据或者表达式}}
</code></pre></li>
<li><p><code>v-for</code>:循环输出HTML元素</p>
<pre><code class="hljs xml">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">'item in list'</span>&gt;</span>{{item.name}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre></li>
<li><p><code>v-text</code>:输出文本数据</p>
<pre><code class="hljs xml">  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-text</span>=<span class="hljs-string">'name'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
</code></pre></li>
<li><p><code>v-html</code>:输出HTML结构数据</p>
<pre><code class="hljs xml">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">'name'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

  data：{
      name：'<span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>zs<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>'
  }
</code></pre></li>
<li><p><code>v-if</code>：根据表达式值的真假决定元素的显示隐藏</p>
<pre><code class="hljs javascript">  <span class="hljs-comment">// isShow为true显示div 为false隐藏div</span>
  <span class="hljs-comment">// v-if是直接操作DOM 即隐藏时会将该div从DOM结构中移除</span>
  &lt;div v-<span class="hljs-keyword">if</span>=<span class="hljs-string">'isShow'</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
</code></pre></li>
<li><p><code>v-show</code>: 根据表达式值的真假决定元素的显示隐藏</p>
<pre><code class="hljs javascript">  <span class="hljs-comment">// isShow为true显示div 为false隐藏div</span>
  <span class="hljs-comment">// v-show是操作div的样式 显示时添加 style = 'display:block'; 隐藏时添加style = 'display:none'</span>
  &lt;div v-<span class="hljs-keyword">if</span>=<span class="hljs-string">'isShow'</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
</code></pre></li>
<li><p><code>v-cloak</code>:解决表达式闪烁问题</p>
<pre><code class="hljs xml">  1. 定义一个样式
  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
      <span class="hljs-selector-attr">[v-cloak]</span>{
          <span class="hljs-attribute">display</span>:none
      }
  </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>

  2. 使用

  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-cloak</span>&gt;</span>{{name}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

  原理:当vue.js文件还没有加载出来时 使用[v-cloak]样式作用于当前指令所在标签,当vue.js能够起作用时,会自动删除v-cloak指令
</code></pre></li>
<li><p><code>v-bind</code>:动态给标签或者组件绑定属性</p>
<pre><code class="hljs xml">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-bind:class</span> = <span class="hljs-string">'box'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

  // 使用:简写v-bind
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:class</span> = <span class="hljs-string">'box'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

  // 当绑定的属性值是常量字符串+变量时 我们在绑定这个属性时 是需要绑定一个对象,这个对象的键就是需要绑定的属性名 这个对象的值就是常量字符串+变量
  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"{href:'http://itcast.cn/index/'+id}"</span>&gt;</span>跳转<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</code></pre></li>
<li><p><code>v-on</code>:绑定事件</p>
<pre><code class="hljs xml">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-on:click</span> = <span class="hljs-string">'click'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> @<span class="hljs-attr">click</span> = <span class="hljs-string">'click'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre></li>
<li><p><code>v-model</code>：双向数据绑定</p>
<pre><code class="hljs sql">  // 可以使用的标签:input textarea <span class="hljs-keyword">select</span> 组件
  &lt;<span class="hljs-keyword">input</span> v-<span class="hljs-keyword">model</span>=<span class="hljs-string">'name'</span>&gt;&lt;/<span class="hljs-keyword">input</span>&gt;
</code></pre></li>
</ul>
<h2 id="-">自定义过滤器</h2>
<h3 id="-">自定义私有过滤器</h3>
<pre><code class="hljs javascript">    <span class="hljs-keyword">new</span> Vue({
            filters：{
                    <span class="hljs-comment">// 每一个过滤器都是一个方法</span>
                    <span class="hljs-string">`过滤器名称`</span>：<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">input,arguments</span>)</span>{
                            <span class="hljs-keyword">return</span> <span class="hljs-string">`对input进行处理的代码逻辑`</span>
                    }
            }
    })
</code></pre><h3 id="-">全局过滤器</h3>
<pre><code class="hljs javascript">    Vue.filter({
            <span class="hljs-comment">// 在对象内部定义过滤器</span>
            <span class="hljs-string">`过滤器名称`</span>：<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">input,arguments</span>)</span>{
                    <span class="hljs-keyword">return</span> <span class="hljs-string">`对input进行处理的代码逻辑`</span>
            }
    })
</code></pre><h3 id="-">使用过滤器</h3>
<pre><code class="hljs javascript">    {{需要被处理的数据 | 过滤器名称(<span class="hljs-built_in">arguments</span>)}}
    {{<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>() | datefmt(<span class="hljs-string">'YYYY-MM-DD HH:mm:ss'</span>)}}
</code></pre><h2 id="-">键盘修饰符</h2>
<pre><code class="hljs javascript">    <span class="hljs-comment">// 使用键盘修饰符</span>
    v-on:事件名称.enter
</code></pre><h3 id="-">自定义键盘修饰符</h3>
<pre><code class="hljs javascript">    <span class="hljs-comment">// vue1.0</span>
    Vue.driective(<span class="hljs-string">'on'</span>).keycodes.f2 = <span class="hljs-number">113</span>

    <span class="hljs-comment">// vue2.0</span>
    Vue.config.keycodes.f2 = <span class="hljs-number">113</span>
</code></pre><h2 id="-">自定义指令</h2>
<h3 id="-">自定义属性指令</h3>
<pre><code class="hljs javascript">    &lt;div v-on:click = <span class="hljs-string">'fn'</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>

    Vue.driective(<span class="hljs-string">'指令名称'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-comment">// 在函数内部完成该指令的逻辑</span>
            <span class="hljs-comment">// this.el 获取使用当前指令的元素</span>
            <span class="hljs-comment">// this.vm 获取到的是当前指令所属的vue对象实例</span>
            <span class="hljs-comment">// this.expression 获取到的是 指令等号后面所书写的表达式</span>
    })

    Vue.directive(<span class="hljs-string">'指令名称'</span>,{
            bind：<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">el,binding</span>)</span>{
            <span class="hljs-comment">// el 当前指令所在元素</span>
            <span class="hljs-comment">// binding.expression 当前指令后面所跟表达式</span>
            <span class="hljs-comment">// binding.value 当前指令表达式的值</span>
            }
    })
</code></pre><h3 id="-">自定义元素指令</h3>
<blockquote>
<p>在vue2.0中推崇的是组件写法，所以不再有自定义元素指令</p>
</blockquote>
<pre><code class="hljs javascript">    Vue.elementDriective(<span class="hljs-string">'指令名称'</span>{
            bind：<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                 <span class="hljs-comment">// 在函数内部完成该指令的逻辑   </span>
            }
    })
</code></pre><h2 id="vue-resource-ajax-">vue-resource ajax请求</h2>
<h3 id="get-">get请求</h3>
<pre><code class="hljs javascript">    <span class="hljs-comment">// 使用当前vue实例调用get方法</span>
    <span class="hljs-keyword">this</span>.$http.get(<span class="hljs-string">'url'</span>,{是需要给后台发送的数据}.then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>)</span>{
            <span class="hljs-comment">// res.body 是获取到的响应数据</span>
    })
</code></pre><h3 id="post-">post请求</h3>
<pre><code class="hljs javascript">    <span class="hljs-keyword">this</span>.$http.post(<span class="hljs-string">'url'</span>,{是需要给后台发送的数据},{<span class="hljs-attr">emulateJSON</span>:<span class="hljs-literal">true</span>}).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>)</span>{
            <span class="hljs-comment">// res.body 是获取到的响应数据</span>
    })
</code></pre><h3 id="jsonp-">jsonp请求</h3>
<pre><code class="hljs javascript">    <span class="hljs-comment">// 使用当前vue实例调用get方法</span>
    <span class="hljs-keyword">this</span>.$http.jsonp(<span class="hljs-string">'url(此URL必须支持jsonp请求)'</span>,{是需要给后台发送的数据}.then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>)</span>{
            <span class="hljs-comment">// res.body 是获取到的响应数据</span>
    })
</code></pre><h2 id="vue-">Vue生命周期</h2>
<blockquote>
<p>Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。</p>
<p>钩子函数:一个系统内置的一批函数,这些函数会在系统运行的某一阶段或者某一时间点自动触发,进行事件的处理后又接着执行
后续任务</p>
</blockquote>
<pre><code class="hljs nginx">    <span class="hljs-attribute">beforecreate</span> : 可以在这加个loading事件，在加载实例时触发 
    created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
    mounted : 挂载元素，获取到DOM节点
    updated : 如果对数据统一处理，在这里写上相应函数
    beforeDestroy : 可以做一个确认停止事件的确认框
</code></pre><h2 id="vue1-0-vue2-0-">vue1.0和vue2.0区别总结</h2>
<h3 id="v-for-">v-for的区别</h3>
<pre><code class="hljs javascript">    <span class="hljs-number">1.</span> vue1<span class="hljs-number">.0</span>中标识循环遍历的每一项使用的是<span class="hljs-string">`track-by='$index'`</span>
       vue2<span class="hljs-number">.0</span>中使用<span class="hljs-string">`:key= 'index'`</span>,
       vue1<span class="hljs-number">.0</span>中有<span class="hljs-string">`$index`</span>这个特殊属性,
       vue2<span class="hljs-number">.0</span>中没有.

    <span class="hljs-number">2.</span> vue1<span class="hljs-number">.0</span>中遍历数组写法<span class="hljs-string">`(index,value) in list`</span>
       vue2<span class="hljs-number">.0</span>中是<span class="hljs-string">`(value,index) in list`</span>

    <span class="hljs-number">3.</span> vue1<span class="hljs-number">.0</span>遍历对象写法<span class="hljs-string">`(key,value) in obj`</span>
       vue2<span class="hljs-number">.0</span>中是<span class="hljs-string">`(value,key) in obj`</span>
</code></pre><h3 id="-">过滤器</h3>
<pre><code class="hljs php">    <span class="hljs-number">1.</span> vue1<span class="hljs-number">.0</span>中有系统提供的过滤器,如 json uppercase ... 
       vue2<span class="hljs-number">.0</span>中全部去除系统过滤器

    <span class="hljs-number">2.</span> vue1<span class="hljs-number">.0</span>和vue2<span class="hljs-number">.0</span>中都有自定义过滤器

    - 自定义全局过滤器
    `Vue.filter(<span class="hljs-string">'过滤器名称'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(管道符号|左边参数的值,其他参数<span class="hljs-number">1</span>,其他参数<span class="hljs-number">2</span>,....)</span> </span>{
             <span class="hljs-keyword">return</span> 对管道符号|左边参数的值做处理以后的值
    })`
    - 自定义私有过滤器(定义在 VM中的filters对象中的所有过滤器都是私有过滤器)
    <span class="hljs-keyword">new</span> Vue({
     ...
     filters:{
         <span class="hljs-string">'过滤器名称'</span>:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(管道符号|左边参数的值,其他参数<span class="hljs-number">1</span>,其他参数<span class="hljs-number">2</span>,....)</span></span>{
            <span class="hljs-keyword">return</span> 对管道符号|左边参数的值做处理以后的值
         }
     }
 });
</code></pre><h3 id="-">过度动画</h3>
<pre><code class="hljs php">    <span class="hljs-number">1</span>、vue1<span class="hljs-number">.0</span>中，需要在实现过渡动画的元素上使用 transition 特性，示例：
    &lt;div v-<span class="hljs-keyword">if</span>=<span class="hljs-string">"show"</span> transition=<span class="hljs-string">"my-transition"</span>&gt;&lt;/div&gt; ,my-transition 可以有程序员自定义名称

    <span class="hljs-number">2</span>、 vue2<span class="hljs-number">.0</span>中 transition特性的写法变成了 &lt;transition&gt;&lt;/transition&gt;的写法    
    &lt;transition name=<span class="hljs-string">"fade"</span>&gt;
            &lt;p v-<span class="hljs-keyword">if</span>=<span class="hljs-string">"show"</span>&gt;hello&lt;/p&gt;
    &lt;/transition&gt;

    <span class="hljs-number">3.</span> 动画钩子函数

    vue1<span class="hljs-number">.0</span>中动画钩子函数
    - 过渡动画进入
    beforeEnter:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span></span>{}      过渡动画进入之前，一般在这个方法中定义目标元素的初始位置
    enter:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el,done)</span></span>{}       过渡动画进入中，在这个方法中定义目标元素的结束位置
    afterEnter:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span></span>{}       过渡动画结束后，通常在这个方法里面重置初始值
    enterCancelled:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span></span>{}   取消过渡动画时被调用

    - 过渡动画离开
    beforeLeave:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span></span>{}      动画离开之前触发    
    leave:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span></span>{}            过渡动画进入中触发
    afterLeave:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span></span>{}       过渡动画离开结束后
    leaveCancelled:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span></span>{}   取消过渡动画时被调用

    vue2<span class="hljs-number">.0</span>中动画钩子函数
    - 过渡动画进入
    before-enter      过渡动画进入之前，一般在这个方法中定义目标元素的初始位置
    enter             过渡动画进入中，在这个方法中定义目标元素的结束位置
    after-enter       过渡动画结束后，通常在这个方法里面重置初始值
    enter-cancelled   取消过渡动画时被调用

    - 过渡动画离开
    before-leave      动画离开之前触发    
    leave             过渡动画进入中触发
    after-leave       过渡动画离开结束后
    leave-cancelled   取消过渡动画时被调用
</code></pre><h3 id="-">组件</h3>
<pre><code class="hljs javascript">    <span class="hljs-number">1.</span> vue1<span class="hljs-number">.0</span>中<span class="hljs-string">`template`</span>中可以定义多个同级HTML标签

            Vue.extend({
                    <span class="hljs-attr">template</span>:<span class="hljs-string">'&lt;h1&gt;我和p标签是同级&lt;/h1&gt;&lt;p&gt;我和h1标签是同级&lt;/p&gt;'</span>
            })

       vue2<span class="hljs-number">.0</span>中<span class="hljs-string">`template`</span>中如果有多个同级HTML标签,必须有一个根元素

            Vue.extend({
                    <span class="hljs-attr">template</span>:<span class="hljs-string">'&lt;div&gt;&lt;h1&gt;我和p标签是同级&lt;/h1&gt;&lt;p&gt;我和h1标签是同级&lt;/p&gt;&lt;/div&gt;'</span>
            })

    <span class="hljs-number">2.</span> vue1<span class="hljs-number">.0</span>和vue2<span class="hljs-number">.0</span>中最常用定义组件方式

            Vue.component(<span class="hljs-string">'组件名'</span>,{
                    <span class="hljs-attr">template</span>:<span class="hljs-string">'组件模板'</span>,

                    <span class="hljs-attr">data</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                            <span class="hljs-keyword">return</span> {
                                    <span class="hljs-comment">// 定义组件中需要使用的数据</span>
                            }
                    },

                    <span class="hljs-attr">methods</span>:{
                            <span class="hljs-comment">// 定义组件中需要使用的方法</span>
                    }
            })
</code></pre><h3 id="v-el-v-ref">v-el和v-ref</h3>
<pre><code class="hljs javascript">    vue1<span class="hljs-number">.0</span>中使用v-el获取DOM元素 使用v-ref获取组件
    vue2<span class="hljs-number">.0</span>中统一使用v-ref获取DOM元素和组件

    &lt;div ref=<span class="hljs-string">'mydiv'</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
    &lt;account ref=<span class="hljs-string">'myaccount'</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">account</span>&gt;</span></span>
    <span class="hljs-comment">// 获取DOM this.$refs.mydiv</span>
    <span class="hljs-comment">// 获取组件 this.$refs.myaccount</span>
</code></pre><h3 id="vue-router-">vue-router的使用</h3>
<pre><code class="hljs xml">    1. 使用`router-link`定义跳转路径
    <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/account"</span>&gt;</span>账号<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span>

    2. 使用`router-view`进行占位,以便于显示组件
    <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span>

    3. 定义跳转路径对应的需要显示的组件
    // 实际项目中一个文件就是一个组件,所以应该是直接引入组件
    var account = Vue.extend({
            template:'<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>账号<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>'
    });
     var login = Vue.extend({
            template:'<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>登录<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>'
    });

    4.实例化路由对象并配置路由规则
    var router = new VueRouter({
            routes:[
                    {
                            path:'/account',
                            component:account,
                            children:[
                                    {
                                            path:'login',
                                            component:login,
                                    }
                            ]
                    },
            ]
    });

    5. 开启路由
    new Vue({
            el :'#app',
            router : router //启动路由对象
    });
</code></pre><hr>
<h2 id="webpack-">webpack 的学习</h2>
<h3 id="-webpack-npm-">使用webpack以及npm创建项目</h3>
<pre><code class="hljs css">    1. 创建项目文件夹

    2. 创建<span class="hljs-selector-tag">npm</span>的配置文件<span class="hljs-selector-tag">package</span><span class="hljs-selector-class">.json</span>

    <span class="hljs-selector-tag">npm</span> <span class="hljs-selector-tag">init</span> <span class="hljs-selector-tag">-y</span>

    3. 创建<span class="hljs-selector-tag">webpack</span>配置文件(<span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.config</span><span class="hljs-selector-class">.js</span>)

    4. 根据项目需求安装所需要使用的模块

    <span class="hljs-selector-tag">npm</span> <span class="hljs-selector-tag">install</span> 包名 <span class="hljs-selector-tag">--save-dev</span>
</code></pre><h3 id="-webpack">安装webpack</h3>
<pre><code class="hljs sql">    1. 全局安装 nrm: `npm <span class="hljs-keyword">install</span> nrm -g<span class="hljs-string">`
    2. 查看镜像源 `</span>nrm ls<span class="hljs-string">`
    3. 切换淘宝镜像源 `</span>nrm <span class="hljs-keyword">use</span> taobao<span class="hljs-string">`
    4. 全局安装webpack `</span>npm <span class="hljs-keyword">install</span> webpack@<span class="hljs-number">1.14</span><span class="hljs-number">.0</span> -g<span class="hljs-string">`
</span></code></pre><h3 id="webpack-">webpack 进行代码打包</h3>
<pre><code class="hljs javascript">    导出一个模块 <span class="hljs-string">`module.exports = 需要导出的对象`</span>

    导入一个模块 <span class="hljs-string">`var 模块名 = require(文件路径)`</span>

    webpack 打包命令 
    <span class="hljs-string">`webpack 需要打包的文件名 输出的文件名`</span>

    例如:
    <span class="hljs-string">`webpack main.js build.js`</span>
</code></pre><h3 id="webpack-">webpack 配置文件</h3>
<pre><code class="hljs javascript">    <span class="hljs-number">1.</span> 默认配置文件名称webpack.config.js

    <span class="hljs-built_in">module</span>.exports = {
            <span class="hljs-attr">entry</span>:<span class="hljs-string">'*需要打包的文件*'</span> <span class="hljs-comment">// 路径+文件名 一般为 ./src/xxx.js</span>
            output:{
                    <span class="hljs-attr">path</span>:<span class="hljs-string">'*输出文件的路径*'</span> <span class="hljs-comment">// 绝对路径 使用__dirname + 路径</span>
                    filename:<span class="hljs-string">`*输出文件的名称*`</span> <span class="hljs-comment">// 一般都为build.js/bundle.js</span>
            }
    }

    <span class="hljs-number">2.</span> 使用webpack进行打包
            - 如果是默认配置文件 则直接在命令行中 输入 <span class="hljs-string">`webpack`</span>
            - 如果是其他改过名字的配置文件 则使用 <span class="hljs-string">`webpack --config 配置文件名`</span>
</code></pre><h2 id="webpack-loader-">webpack loader的使用</h2>
<blockquote>
<p>loader：预处理器。在js代码执行之前需要执行的一些处理。</p>
</blockquote>
<h3 id="css-loader">css-loader</h3>
<blockquote>
<p>css-loader 是进行css解析，能够使浏览器正常识别js文件中导入的 css 文件</p>
</blockquote>
<pre><code class="hljs css">    1. 初始化<span class="hljs-selector-tag">package</span><span class="hljs-selector-class">.json</span>
    <span class="hljs-selector-tag">npm</span> <span class="hljs-selector-tag">init</span>

    2. 安装<span class="hljs-selector-tag">css-loader</span>以及<span class="hljs-selector-tag">style-loader</span>
    <span class="hljs-selector-tag">npm</span> <span class="hljs-selector-tag">install</span> <span class="hljs-selector-tag">style-loader</span> <span class="hljs-selector-tag">css-loader</span> <span class="hljs-selector-tag">--save-dev</span>

    3. 在<span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.config</span><span class="hljs-selector-class">.js</span>文件中进行配置

            <span class="hljs-selector-tag">module</span>:{
                    <span class="hljs-attribute">loaders</span>:[
                            {
                                    test: /\.css$/,
                                    loader:<span class="hljs-string">'style-loader!css-loader'</span>
                            }
                    ]
            }
</code></pre><h3 id="sass-loader-">sass-loader 的使用</h3>
<blockquote>
<p>scss-loader是进行sass文件的解析</p>
</blockquote>
<pre><code class="hljs sql">    1. 安装sass-loader
    npm <span class="hljs-keyword">install</span> node-sass sass-loader <span class="hljs-keyword">style</span>-loader css-loader <span class="hljs-comment">--save-dev</span>

    <span class="hljs-number">2.</span>配置sass-loader
     loaders:[
                    {
                            <span class="hljs-keyword">test</span>: /\.scss$/,
                            loader:<span class="hljs-string">'style-loader!css-loader!scss-loader'</span>
                    }
            ]
</code></pre><h3 id="less-loader-">less-loader 的使用</h3>
<blockquote>
<p>less-loader是进行less文件的解析</p>
</blockquote>
<pre><code class="hljs sql">    1. 安装scss-loader
    npm <span class="hljs-keyword">install</span> <span class="hljs-keyword">less</span> <span class="hljs-keyword">less</span>-loader <span class="hljs-keyword">style</span>-loader css-loader <span class="hljs-comment">--save-dev</span>

    <span class="hljs-number">2.</span>配置scss-loader
     loaders:[
                    {
                            <span class="hljs-keyword">test</span>: /\.less$/,
                            loader:<span class="hljs-string">'style-loader!css-loader!less-loader'</span>
                    }
            ]
</code></pre><h3 id="url-loader-">url-loader 的使用</h3>
<blockquote>
<p>url-loader是进行url资源的解析</p>
</blockquote>
<pre><code class="hljs sql">    1. 安装url-loader
    `npm <span class="hljs-keyword">install</span> <span class="hljs-keyword">file</span>-loader <span class="hljs-keyword">url</span>-loader <span class="hljs-comment">--save-dev`</span>

    <span class="hljs-number">2.</span>配置<span class="hljs-keyword">url</span>-loader
     loaders:[
                    {
                            <span class="hljs-keyword">test</span>: /\.(png|jpg|gif|ttf)$/,
                            loader:<span class="hljs-string">'url-loader!limit=20000'</span>
                            // <span class="hljs-number">1</span>kb = <span class="hljs-number">1024</span>b(字节)
                            // 对于比较小的图片资源可以使用<span class="hljs-keyword">limit</span>进行限制 转换成base64字符串内嵌到js代码中
                            // 对于超过限制的图片才转成<span class="hljs-keyword">URL</span>进行网络请求
                    }
            ]
</code></pre><h3 id="webpac-dev-server-">webpac-dev-server的使用</h3>
<pre><code class="hljs sql">    1. 安装webpack-dev-server

    npm <span class="hljs-keyword">install</span> webpack@<span class="hljs-number">1.14</span><span class="hljs-number">.0</span> webpack-dev-<span class="hljs-keyword">server</span>@<span class="hljs-number">1.16</span><span class="hljs-number">.0</span> <span class="hljs-comment">--save-dev</span>

    <span class="hljs-number">2.</span> 安装自动生成HTML文件的插件
    npm <span class="hljs-keyword">install</span> html-webpack-<span class="hljs-keyword">plugin</span>@<span class="hljs-number">2.28</span><span class="hljs-number">.0</span> <span class="hljs-comment">--save-dev</span>

    <span class="hljs-number">3.</span> 修改package.json文件

            <span class="hljs-string">"scripts"</span>: {
                    <span class="hljs-string">"dev"</span>: <span class="hljs-string">"webpack-dev-server --hot --inline --open --port 5008"</span>
            },

    <span class="hljs-number">4.</span> 配置webpack.config.js中的内容

    - 引入html-webpack-<span class="hljs-keyword">plugin</span>
            <span class="hljs-string">`var htmlWP = require('html-webpack-plugin');`</span>
    - 在modul.exports中加入
             plugins:[
                    <span class="hljs-keyword">new</span> htmlWP({
                            title: <span class="hljs-string">'首页'</span>,  //生成的页面标题
                            filename: <span class="hljs-string">'index.html'</span>, //webpack-dev-<span class="hljs-keyword">server</span>在内存中生成的文件名称，自动将<span class="hljs-keyword">build</span>注入到这个页面底部，才能实现自动刷新功能
                            <span class="hljs-keyword">template</span>: <span class="hljs-string">'template.html'</span> //根据template.html这个模板来生成(这个文件程序员自己书写)
                    })
            ]

    <span class="hljs-number">5.</span> 运行 npm run dev
</code></pre><h3 id="babel-loader-">babel-loader的使用</h3>
<blockquote>
<p>babel-loader是用来将es6语法转换成es5语法</p>
</blockquote>
<pre><code class="hljs css">    1. 安装<span class="hljs-selector-tag">babel-loader</span>
    `<span class="hljs-selector-tag">npm</span> <span class="hljs-selector-tag">install</span> <span class="hljs-selector-tag">babel-core</span> <span class="hljs-selector-tag">babel-loader</span> <span class="hljs-selector-tag">babel-preset-es2015</span> <span class="hljs-selector-tag">babel-plugin-transform-runtime</span>  <span class="hljs-selector-tag">--save-dev</span>`

    2. 配置<span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.config</span><span class="hljs-selector-class">.js</span>文件

    {
            <span class="hljs-attribute">test</span>: /\.js$/,  // 将.js文件中的es6语法转成es5语法
            loader:<span class="hljs-string">'babel-loader'</span>,
            exclude:/node_modules/ // 排除node_modules文件夹下的js文件不用被转换
    }

    3. 配置<span class="hljs-selector-tag">babel</span>的转码规则

    <span class="hljs-selector-tag">babel</span>:{
            <span class="hljs-attribute">presets</span>:[<span class="hljs-string">'es2015'</span>],  // 配置将es6语法转换成es5语法
            plugins:[<span class="hljs-string">'transform-runtime'</span>] // 用来解析vue文件
    }
</code></pre><h3 id="webpack-vue-">webpack解析vue文件</h3>
<h3 id="-vue-loader-vue-">安装vue-loader解析.vue文件</h3>
<pre><code class="hljs css">    1. 安装相关包
    `<span class="hljs-selector-tag">npm</span> <span class="hljs-selector-tag">install</span> <span class="hljs-selector-tag">vue-loader</span> <span class="hljs-selector-tag">vue-template-compiler</span> <span class="hljs-selector-tag">babel-plugin-transform-runtime</span> <span class="hljs-selector-tag">--save-dev</span>`

    2. 配置<span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.config</span><span class="hljs-selector-class">.js</span>文件
    {
            <span class="hljs-attribute">test</span>: /.vue$/,  // 解析 .vue 组件页面文件
            loader:<span class="hljs-string">'vue-loader'</span> 
    }
</code></pre><h3 id="-vue-">.vue文件基本代码结构</h3>
<blockquote>
<p>一个.vue文件就是一个vue的组件</p>
</blockquote>
<pre><code class="hljs xml">    // 1. 组件模板
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                    <span class="hljs-comment">&lt;!-- 1.0 template主要是放html元素的（html的页面结构） --&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-text</span>=<span class="hljs-string">"msg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"red"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

    // 2. 负责导出vue的对象
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
            <span class="hljs-comment">// 负责导出 .vue这个组件对象(它本质上是一个Vue对象,所以Vue中该定义的元素都可以使用)</span>
            <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span>{  <span class="hljs-comment">// es6的导出对象的写法</span>
                    data(){  <span class="hljs-comment">//等价于 es5的 data:function(){</span>
                            <span class="hljs-keyword">return</span> {
                                    <span class="hljs-attr">msg</span> :<span class="hljs-string">'hello vuejs'</span>
                            }
                    },
                    <span class="hljs-attr">methods</span>:{

                    },
                    created(){

                    }
            }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

    // 3. 书写组件内部的样式
    <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined">
    // scoped表示这个里面写的css代码只是在当前组件页面上有效，不会去影响到其他组件页面
            .red{
                    color: red;
            }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
</code></pre><h3 id="es6-">ES6语法使用总结</h3>
<pre><code class="hljs javascript">    <span class="hljs-number">1</span>、对象的写法

            es5中对象： {<span class="hljs-attr">add</span>:add,<span class="hljs-attr">substrict</span>:substrict}
            es6中对象： {add,substrict}  注意这种写法的属性名称和值变量是同一个名称才可以简写，否则要想es5那样的写法,例如： {<span class="hljs-attr">addFun</span>:add}

    <span class="hljs-number">2</span>、在对象中的方法的写法

            es5中对象： {<span class="hljs-attr">add</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{},<span class="hljs-attr">substrict</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{}}
            es6中对象： {add(){},substrict(){}}

    <span class="hljs-number">3</span>、对象的导出写法

            es5两种形式：
            <span class="hljs-number">1</span>、<span class="hljs-built_in">module</span>.exports = fucntion (){};
            <span class="hljs-number">2</span>、exprots.add =  fucntion (){};

            es6中写法：
            <span class="hljs-number">1</span>、<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span>{
            add(){}
            }
            <span class="hljs-number">2</span>、<span class="hljs-keyword">export</span> fucntion add(){} 相当于 将add方法当做一个属性挂在到exports对象

    <span class="hljs-number">4</span>、对象的导入

            es5: <span class="hljs-keyword">var</span> add  = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./calc.js'</span>);
            es6:
            如果导出的是：<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span>{ add(){}}
            那么可以通过  <span class="hljs-keyword">import</span> obj <span class="hljs-keyword">from</span> <span class="hljs-string">'./calc.js'</span>

            如果导出的是：
            <span class="hljs-keyword">export</span> fucntion add(){} 
            <span class="hljs-keyword">export</span> fucntion substrict(){} 
            <span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> PI=<span class="hljs-number">3.14</span>

            那么可以通过按需加载 <span class="hljs-keyword">import</span> {add,substrict,PI} <span class="hljs-keyword">from</span> <span class="hljs-string">'./calc.js'</span>

    <span class="hljs-number">5</span>、es6中的箭头函数的写法

            箭头的演变过程：
            <span class="hljs-comment">//需求：利用函数实现倒序排列</span>
            [<span class="hljs-number">2</span>,<span class="hljs-number">1</span>,<span class="hljs-number">3</span>].sort(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">x,y</span>)</span>{<span class="hljs-keyword">return</span> y - x;});

            <span class="hljs-comment">//用箭头函数实现 =&gt;读 goes to</span>
            [<span class="hljs-number">2</span>,<span class="hljs-number">1</span>,<span class="hljs-number">3</span>].sort(<span class="hljs-function">(<span class="hljs-params">x,y</span>)=&gt;</span>{<span class="hljs-keyword">return</span> y - x;});
            [<span class="hljs-number">2</span>,<span class="hljs-number">1</span>,<span class="hljs-number">3</span>].sort(<span class="hljs-function">(<span class="hljs-params">x,y</span>)=&gt;</span> {x++;y++; y - x;});
            [<span class="hljs-number">2</span>,<span class="hljs-number">1</span>,<span class="hljs-number">3</span>].forEach(<span class="hljs-function"><span class="hljs-params">x</span>=&gt;</span> {<span class="hljs-built_in">console</span>.log(x)});
</code></pre><h3 id="vue-router-">vue-router集成</h3>
<pre><code class="hljs php">    <span class="hljs-number">1.</span> 安装vue-router
    `npm install vue-router --save`

    <span class="hljs-number">2.</span> App.vue中书写跳转链接

    &lt;router-link to=<span class="hljs-string">"/login"</span>&gt;登录&lt;/router-link&gt;
    &lt;router-link to=<span class="hljs-string">"/register"</span>&gt;注册&lt;/router-link&gt;

    &lt;!-- 路由占位符 --&gt;
    &lt;router-view&gt;&lt;/router-view&gt;

    <span class="hljs-number">3.</span> main.js中集成vue-router并配置路由规则

    <span class="hljs-comment">// 1. 导入vue-router</span>
    import vueRouter from <span class="hljs-string">'vue-router'</span>;
    <span class="hljs-comment">// 2. 将vueRouter对象绑定到Vue对象上</span>
    Vue.<span class="hljs-keyword">use</span>(vueRouter);

    <span class="hljs-comment">// 3. 导入路由规则对应的组件对象</span>
    import login from <span class="hljs-string">'./components/account/login.vue'</span>;
    import register from <span class="hljs-string">'./components/account/register.vue'</span>;

    <span class="hljs-comment">// 4.定义路由规则</span>
    <span class="hljs-keyword">var</span> router1 = <span class="hljs-keyword">new</span> vueRouter({
            routes:[
                    {path:<span class="hljs-string">'/login'</span>,component:login}, 
                    {path:<span class="hljs-string">'/register'</span>,component:register}
            ]
            });

    <span class="hljs-comment">// 5. 利用Vue对象进行解析渲染</span>
    <span class="hljs-keyword">new</span> Vue({
            el:<span class="hljs-string">'#app'</span>,
            <span class="hljs-comment">// 使用路由对象实例</span>
            router:router1,
            render:c=&gt;c(App)
    });
</code></pre><h3 id="mint-ui-">mint-ui的使用</h3>
<pre><code class="hljs javascript">    <span class="hljs-number">1.</span> 安装mint-ui
    npm install mint-ui --save

    <span class="hljs-number">2.</span> 在项目入口文件main.js中配置mint-ui
    - 导入mint-ui
    <span class="hljs-keyword">import</span> mint <span class="hljs-keyword">from</span> <span class="hljs-string">'mint-ui'</span>
    - 在vue中注册mint-ui
    Vue.use(mint)

    <span class="hljs-number">3.</span> 使用csscomponents
    - 在main.js中导入css样式
    <span class="hljs-keyword">import</span> <span class="hljs-string">'mint-ui/lib/style.min.css'</span>;
    - 在vue的组件中使用mint-ui提供的控件

    <span class="hljs-number">4.</span> 使用jscomponents
    - 在vue组件内部的script标签中按需导入需要使用的控件
    <span class="hljs-keyword">import</span> {js组件名称} form <span class="hljs-string">'mint-ui'</span>
    - 在js代码中使用mint-ui提供的控件
</code></pre><h3 id="git-">git 常用命令</h3>
<pre><code class="hljs php">    git config --<span class="hljs-keyword">global</span> user.name <span class="hljs-string">"用户名"</span>
    git config --<span class="hljs-keyword">global</span> user.email <span class="hljs-string">"邮箱账号"</span>

    <span class="hljs-comment">// 创建版本库</span>
    git init
    <span class="hljs-comment">// 添加文件到缓存区</span>
    git add ./
    <span class="hljs-comment">// 提交信息</span>
    git commit -m <span class="hljs-string">'说明信息'</span>
    <span class="hljs-comment">// 推送到远程仓库</span>
    git push -u orign master

    <span class="hljs-comment">// 查看仓库状态</span>
    git status
    <span class="hljs-comment">// 查看提交记录</span>
    git log --oneline
    <span class="hljs-comment">// 查看版本切换记录</span>
    git reflog
    <span class="hljs-comment">// 版本回退</span>
    git reset --hard 版本号

    <span class="hljs-comment">// 回到主分支</span>
    首先git checkout -b temp
    其次git checkout master
</code></pre><h2 id="vscode-">vscode 代码片段</h2>
<pre><code class="hljs javascript">    <span class="hljs-string">"Print to console"</span>: {
    <span class="hljs-string">"prefix"</span>: <span class="hljs-string">"log"</span>,
    <span class="hljs-string">"body"</span>: [
        <span class="hljs-string">"console.log('$1');"</span>,
        <span class="hljs-string">"$2"</span>
    ],
    <span class="hljs-string">"description"</span>: <span class="hljs-string">"Log output to console"</span>
},
<span class="hljs-string">"Create vue template"</span>: {
    <span class="hljs-string">"prefix"</span>: <span class="hljs-string">"vuec"</span>,
    <span class="hljs-string">"body"</span>: [
        <span class="hljs-string">"&lt;template&gt;"</span>,
        <span class="hljs-string">"  &lt;div id='tmpl'&gt;"</span>,
        <span class="hljs-string">"  &lt;/div&gt;"</span>,
        <span class="hljs-string">"&lt;/template&gt;"</span>,
        <span class="hljs-string">"&lt;script&gt;"</span>,
        <span class="hljs-string">"export default {"</span>,
        <span class="hljs-string">"  name: \"${1:component_name}\","</span>,
        <span class="hljs-string">"  data () {"</span>,
        <span class="hljs-string">"    return {"</span>,
        <span class="hljs-string">"    };"</span>,
        <span class="hljs-string">"  }"</span>,
        <span class="hljs-string">"}"</span>,
        <span class="hljs-string">"&lt;/script&gt;"</span>,
        <span class="hljs-string">"&lt;style lang=\"${2:css}\" scoped&gt;"</span>,
        <span class="hljs-string">"&lt;/style&gt;"</span>
    ],
    <span class="hljs-string">"description"</span>: <span class="hljs-string">"Create vue template"</span>
}
</code></pre><h2 id="vetur-">vetur插件配置</h2>
<pre><code class="hljs javascript">    <span class="hljs-string">"emmet.syntaxProfiles"</span>: {
            <span class="hljs-string">"vue-html"</span>: <span class="hljs-string">"html"</span>,
            <span class="hljs-string">"vue"</span>: <span class="hljs-string">"html"</span>
    }
</code></pre><h2 id="-">父组件向子组件传值</h2>
<pre><code class="hljs javascript">    子组件sonComponent
    父组件fatherComponent

    sonComponent:

    <span class="hljs-number">1.</span> 定义props数组对象,数组对象中的属性用于接收父组件传递过来的数据

    <span class="hljs-keyword">new</span> Vue({
            <span class="hljs-attr">props</span>:[<span class="hljs-string">'id'</span>], <span class="hljs-comment">// id即为用于接收父组件传递过来数据的属性</span>
    })

    fatherComponent:

    <span class="hljs-number">1.</span> 使用子组件时绑定子组件props中定义的属性进行传值

    <span class="hljs-comment">// 这里的id需要和子组件props中定义的属性一致</span>
    &lt;sonComponent v-bind:id = <span class="hljs-string">'需要传递的数据'</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">sonComponent</span>&gt;</span></span>
</code></pre><h2 id="-">子组件向父组件传值</h2>
<pre><code class="hljs javascript">    子组件sonComponent
    父组件fatherComponent

    sonComponent:

    <span class="hljs-number">1.</span> 发布事件

    <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'事件名称'</span>,<span class="hljs-string">'需要传递的数据'</span>);

    <span class="hljs-number">2.</span> 事件的触发

    send(){
            <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'事件名称'</span>,<span class="hljs-string">'需要传递的数据'</span>)
    }

    fatherComponent:

    <span class="hljs-number">1.</span> 订阅事件

    <span class="hljs-comment">// 父组件中使用子组件(`事件名称`和子组件中`this.$emit('事件名称','需要传递的数据')`里的事件名称一致)</span>
    &lt;sonComponent v-on:<span class="hljs-string">'事件名称'</span> = <span class="hljs-string">'事件处理函数'</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">sonComponent</span>&gt;</span></span>

    <span class="hljs-number">2.</span> 获取数据

    methods：{
            事件处理函数:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{
                    <span class="hljs-comment">// data 就是子组件sonComponent中需要传递的数据</span>
            }
    }
</code></pre><h2 id="-">非父子组件传值</h2>
<blockquote>
<p>使用<strong>event bus(事件总线)</strong>：利用一个共享的vue实例对象来进行数据的传递. 同时采用的是 <strong>发布-订阅者模式</strong></p>
</blockquote>
<pre><code class="hljs php">    componentA  componentB进行数据传递(B-&gt;A)

    **定义一个公有的Vue实例,保证两个组件都能够使用,一般在一个单独的js文件中导出一个Vue实例,
    然后在componentA和componentB组件中导入该实例进行使用**

    export <span class="hljs-keyword">default</span> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue();

    componentB：(B组件时需要传递数据的组件)

    <span class="hljs-number">1.</span> 进行事件的发布(注册)

    vm.$emit(<span class="hljs-string">'事件名称'</span>,<span class="hljs-string">'需要传递的数据'</span>)

    <span class="hljs-number">2.</span> 事件的触发(用于发布事件)

    send(){
            this.$emit(<span class="hljs-string">'事件名称'</span>,<span class="hljs-string">'需要传递的数据'</span>)
    }

    componentA：(A组件是接收数据的组件)

    <span class="hljs-number">1.</span> 订阅事件

    vm.$on(<span class="hljs-string">'事件名称'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span></span>{
            <span class="hljs-comment">// 此处的data就是 发布组件中传递过来的数据</span>
    })
</code></pre><h2 id="-">大型复杂项目中数据状态管理</h2>
<blockquote>
<p>复杂项目中数据的传递和管理一般不会用到<code>event bus</code>,因为如果订阅者过多,无法准确的知道数据的流向.所以对于大型项目应该使用<code>Vue</code>提供的<code>vuex</code>进行数据管理</p>
<p>官方文档<a href="https://vuex.vuejs.org/zh-cn/">https://vuex.vuejs.org/zh-cn/</a></p>
</blockquote>
<pre><code class="hljs javascript">    <span class="hljs-number">1.</span> 安装vuex
    npm install vuex --save

    <span class="hljs-number">2.</span> main.js中引入安装
    <span class="hljs-keyword">import</span> Vuex <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span>;
    Vue.use(Vuex);

    <span class="hljs-number">3.</span> 配置vuex
    <span class="hljs-comment">//Vuex配置</span>
    <span class="hljs-keyword">const</span> store = <span class="hljs-keyword">new</span> Vuex.Store({
            <span class="hljs-comment">// state类似vue实例中的data 用来存放数据</span>
            state: {
                    <span class="hljs-comment">// 可以设置一些需要全局使用的数据</span>
                    username:<span class="hljs-string">'zxx'</span>
            },
            <span class="hljs-comment">// mutations类似vue实例中的methods</span>
            mutations: {
                    <span class="hljs-comment">// 用来处理数据 比喻数据删除更新等操作</span>
                    update(state,name){
                            state.username = name;
                    }
            }
    })

    <span class="hljs-number">3.</span> 组件中通过<span class="hljs-keyword">this</span>.$store使用

            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$store.state.username);

    <span class="hljs-number">4.</span> 调用mutations方法更新数据

            <span class="hljs-comment">// 第一个参数是 mutations 中定义的对应的方法名 第二个参数是需要更新的数据</span>
            <span class="hljs-comment">// 具体更新逻辑在update方法中实现</span>
            <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'update'</span>,<span class="hljs-string">'lxy'</span>);调用update方法更新用户名
            <span class="hljs-keyword">this</span>.$store.dispath(<span class="hljs-string">'update'</span>,<span class="hljs-string">'lxy'</span>); <span class="hljs-comment">// 异步调用</span>
</code></pre><hr>
<h2 id="vue-cli-spa-">vue-cli命令行工具搭建spa应用</h2>
<pre><code class="hljs sql">    1、在cmd命令面板中执行：npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--global vue-cli 全局安装 vue-cli</span>

    <span class="hljs-number">2</span>、利用：vue init webpack projectName(自定义项目名称) 创建一个基于webpack模板的新项目

    <span class="hljs-number">3</span>、进入到项目名称文件夹中执行 npm <span class="hljs-keyword">install</span> 安装项目所需依赖

    <span class="hljs-number">4</span>、运行 npm run dev 运行项目
</code></pre><h2 id="vue-js-">vue项目引入公共js文件</h2>
<pre><code class="hljs javascript">    &gt; 如果需要将公共js文件引入到main.js文件中使用,可以引入后将模块注入到Vue的原型中

    <span class="hljs-comment">// main.js</span>
    <span class="hljs-keyword">import</span> common <span class="hljs-keyword">from</span> <span class="hljs-string">'common.js'</span>;
    Vue.prototype.$common = common;
    <span class="hljs-comment">// Object.definePrototype(Vue.prototype, '$common', { value: common });</span>

    <span class="hljs-comment">// 其他文件使用</span>
    <span class="hljs-keyword">this</span>.$common就是引入的common对象
</code></pre><h2 id="vue-">vue插件开发</h2>
<pre><code class="hljs javascript">    <span class="hljs-comment">// common.js文件</span>
    <span class="hljs-keyword">var</span> obj = {
            <span class="hljs-attr">apidomain</span>:<span class="hljs-string">'http://www.lovegf.cn:8899'</span>, <span class="hljs-comment">// 所有数据请求的根域名地址</span>
    }
    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
            <span class="hljs-attr">install</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">Vue</span>) </span>{
                    <span class="hljs-built_in">Object</span>.defineProperty(Vue.prototype, <span class="hljs-string">'$common'</span>, { <span class="hljs-attr">value</span>: obj });
            }
    }

    <span class="hljs-comment">// main.js文件</span>
    <span class="hljs-keyword">import</span> common <span class="hljs-keyword">from</span> <span class="hljs-string">'common'</span>;
    Vue.use(common);

    <span class="hljs-comment">// 其他文件使用</span>
    <span class="hljs-keyword">this</span>.$common
</code></pre><h2 id="vue-router-">vue-router路由拦截</h2>
<pre><code class="hljs javascript">    <span class="hljs-comment">// 1. 设置路由规则时进行拦截</span>
    {
        <span class="hljs-attr">path</span>: <span class="hljs-string">'/userinfo'</span>,
        <span class="hljs-attr">component</span>: userinfo,
        <span class="hljs-attr">meta</span>: {
            <span class="hljs-attr">requireAuth</span>: <span class="hljs-literal">true</span>,  <span class="hljs-comment">// 添加该字段，表示进入这个路由是需要登录的</span>
        },
        <span class="hljs-attr">beforeEnter</span>: <span class="hljs-function">(<span class="hljs-params">to, <span class="hljs-keyword">from</span>, next</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (to.meta.requireAuth) {  <span class="hljs-comment">// 判断该路由是否需要登录权限</span>
                <span class="hljs-keyword">if</span> (getCookie(<span class="hljs-string">'session'</span>)) {  <span class="hljs-comment">// 通过vuex state获取当前的token是否存在</span>
                    next(); <span class="hljs-comment">// 存在就进入userinfo</span>
                }
                <span class="hljs-keyword">else</span> {
                    next({
                        <span class="hljs-attr">path</span>: <span class="hljs-string">'/login'</span>,
                        <span class="hljs-attr">query</span>: { <span class="hljs-attr">redirect</span>: to.fullPath }  <span class="hljs-comment">// 将跳转的路由path作为参数，登录成功后跳转到该路由</span>
                    })
                }
            }
            <span class="hljs-keyword">else</span> {
                next();
            }
        }
    }

    <span class="hljs-comment">// 2. 登录成功后跳转路由</span>
    <span class="hljs-keyword">this</span>.$router.push(<span class="hljs-string">'/userinfo'</span>);
</code></pre><h2 id="vue-router-">vue-router路由模式</h2>
<pre><code class="hljs javascript">    <span class="hljs-keyword">var</span> router = <span class="hljs-keyword">new</span> vueRouter({
            <span class="hljs-comment">// 设置路由模式</span>
        mode: <span class="hljs-string">'hash'</span>,
            <span class="hljs-comment">// hash带锚点 history不带锚点</span>
            <span class="hljs-comment">// hash可以将页面放到其他浏览器或标签打开 history不可以(服务端渲染解决)</span>
    })
</code></pre><h2 id="-">服务端渲染</h2>
<blockquote>
<p>问题:1.单页面应用不利于SEO,因为所有HTML文档都是由js动态生成的。2.首次加载速度过慢。</p>
</blockquote>
<h2 id="-css">分离css</h2>
<pre><code class="hljs sql">    1. 安装插件
    npm <span class="hljs-keyword">install</span> <span class="hljs-keyword">extract</span>-<span class="hljs-built_in">text</span>-webpack-<span class="hljs-keyword">plugin</span>@<span class="hljs-number">1.0</span><span class="hljs-number">.1</span> <span class="hljs-comment">--save-dev</span>

    <span class="hljs-number">2.</span> 修改css-loader配置
    loader: ExtractTextPlugin.extract(<span class="hljs-string">"style-loader"</span>, <span class="hljs-string">"css-loader"</span>)

    <span class="hljs-number">3.</span> <span class="hljs-keyword">plugin</span>配置中使用插件
    <span class="hljs-keyword">new</span> ExtractTextPlugin(<span class="hljs-string">'app.css'</span>),
</code></pre><h2 id="-">分离第三方包</h2>
<pre><code class="hljs javascript">    <span class="hljs-number">1.</span> 引入webpack
    <span class="hljs-keyword">var</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack'</span>);

    <span class="hljs-number">2.</span> 修改入口文件
    entry: {
            <span class="hljs-attr">app</span>: path.resolve(__dirname, <span class="hljs-string">'src/main.js'</span>),
            <span class="hljs-comment">// 需要分离的第三方包名写在数组中</span>
            vendors: [<span class="hljs-string">'vue'</span>, <span class="hljs-string">'vue-resource'</span>, <span class="hljs-string">'vue-router'</span>, <span class="hljs-string">'vuex'</span>, <span class="hljs-string">'mint-ui'</span>, <span class="hljs-string">'moment'</span>, <span class="hljs-string">'vue-preview'</span>]
    },

    <span class="hljs-number">3.</span> plugin中配置插件
    <span class="hljs-comment">// 分离第三方包插件</span>
    <span class="hljs-keyword">new</span> webpack.optimize.CommonsChunkPlugin({
            <span class="hljs-attr">name</span>: <span class="hljs-string">'vendors'</span>,
            <span class="hljs-attr">filename</span>: <span class="hljs-string">'vendors.js'</span>
    }) 
</code></pre><h2 id="-">代码压缩</h2>
<pre><code class="hljs javascript">    <span class="hljs-number">1.</span> html代码压缩
    <span class="hljs-keyword">new</span> htmlwp({
            <span class="hljs-attr">title</span>: <span class="hljs-string">'首页'</span>,  <span class="hljs-comment">//生成的页面标题&lt;head&gt;&lt;title&gt;首页&lt;/title&gt;&lt;/head&gt;</span>
            filename: <span class="hljs-string">'index.html'</span>, <span class="hljs-comment">//webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能</span>
            template: <span class="hljs-string">'template.html'</span>, <span class="hljs-comment">//根据index1.html这个模板来生成(这个文件请程序员自己生成)</span>
            <span class="hljs-comment">// 代码压缩</span>
            minify: {
                    <span class="hljs-comment">// 删除注释</span>
                    removeComments: <span class="hljs-literal">true</span>,
                    <span class="hljs-comment">// 删除空格</span>
                    collapseWhitespace: <span class="hljs-literal">true</span>,
                    <span class="hljs-comment">// 删除空格缩进</span>
                    removeAttributeQuotes: <span class="hljs-literal">true</span>
            }
    }),

    <span class="hljs-comment">// 2. js代码压缩混淆插件</span>
    <span class="hljs-keyword">new</span> webpack.optimize.UglifyJsPlugin({
            <span class="hljs-attr">beautify</span>: <span class="hljs-literal">false</span>,
            <span class="hljs-attr">mangle</span>: {
                    <span class="hljs-attr">screw_ie8</span>: <span class="hljs-literal">true</span>,
                    <span class="hljs-attr">keep_fnames</span>: <span class="hljs-literal">true</span>
            },
            <span class="hljs-attr">compress</span>: {
                    <span class="hljs-attr">warnings</span>: <span class="hljs-literal">false</span>,
                    <span class="hljs-attr">screw_ie8</span>: <span class="hljs-literal">true</span>
            },
            <span class="hljs-attr">comments</span>: <span class="hljs-literal">false</span>
    }),
    <span class="hljs-comment">// 3. 删除警告</span>
    <span class="hljs-keyword">new</span> webpack.DefinePlugin({
    <span class="hljs-string">'process.env'</span>: {
            <span class="hljs-comment">// 注意字符串被引号引起来</span>
            NODE_ENV: <span class="hljs-string">'"production"'</span>
    }
    })
</code></pre><hr>
<p>笔记访问地址<a href="http://192.168.13.62:9999/">http://192.168.13.62:9999/</a></p>
<p><a href="https://git.oschina.net/UniverseKing/react_douban.git">https://git.oschina.net/UniverseKing/react_douban.git</a></p>
<p><a href="https://git.oschina.net/UniverseKing/vue_system.git">https://git.oschina.net/UniverseKing/vue_system.git</a></p>
<p>webpack2.0学习代码: <code>git clone https://git.oschina.net/UniverseKing/react_douban.git</code></p>

    </article>


</body></html>